<template>
  <div class="login-pwd-container">
    <el-form>
      <el-form-item>
        <el-input v-model="state.form.loginName" size="large" placeholder="请输入账号">
          <template #prepend>
            <el-icon class="icon-style"><user /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.form.password" size="large" placeholder="请输入密码" type="password">
          <template #prepend>
            <el-icon class="icon-style"><lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="enabledCaptchaLogin">
        <div style="display: flex">
          <el-input
            v-model="state.form.captchaCode"
            size="large"
            placeholder="请输入验证码"
            style="height: 40px"
            @keyup.enter="handlePwdLogin"
          >
            <template #prepend>
              <el-icon class="icon-style"><scale-to-original /></el-icon>
            </template>
          </el-input>
          <div style="height: 40px; padding-left: 10px">
            <el-tooltip content="点击刷新" placement="bottom" :show-after="500">
              <el-image class="captcha-img" :src="state.captchaUrl" @click="handleRefreshCaptcha">
                <template #placeholder>
                  <div class="image-slot">
                    加载中
                    <el-icon class="is-loading"><loading /></el-icon>
                  </div>
                </template>
                <template #error>
                  <div class="image-slot" @click="handleRefreshCaptcha"> 失败重试 </div>
                </template>
              </el-image>
            </el-tooltip>
          </div>
        </div>
      </el-form-item>
      <el-button
        class="login-btn"
        type="primary"
        size="large"
        :disabled="disabledLoginPwdBtn"
        :loading="props.loading"
        @click="handlePwdLogin"
      >
        <span class="submit-text">登录</span>
      </el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue'
import { ElTooltip, ElImage, ElForm, ElFormItem, ElInput } from 'element-plus'
import { User, Lock, ScaleToOriginal, Loading } from '@element-plus/icons-vue'
import { env } from '@/utils'
import type { Pwd } from '@/api/modules/auth/auth'
import { authApi } from '@/api/modules/auth/auth'
import './style.scss'

const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
const emits = defineEmits(['login'])

// 定义所有响应式变量
const state = reactive({
  loginType: 0,
  form: {
    loginName: '',
    password: '',
    captchaCode: '',
    captchaId: ''
  } as Pwd,
  captchaUrl: '',
  waiting: false,
  waitText: ''
})

const enabledCaptchaLogin = computed(() => env.LOGIN_VERIFY == 2)

// 定义页面按照状态变量
const disabledLoginPwdBtn = computed(
  () =>
    state.form.loginName == '' || state.form.password == '' || (env.LOGIN_VERIFY == 2 && state.form.captchaCode == '')
)

const handleRefreshCaptcha = () => {
  //state.captchaUrl = `${env.API_DOMAIN}/auth/captcha/code`
  authApi.getCaptchaCode().then(resp => {
    if (resp.success) {
      state.form.captchaId = resp.data.captchaId
      state.captchaUrl = 'data:image/png;base64,' + resp.data.img
    }
  })
}
const handlePwdLogin = () => {
  if (!disabledLoginPwdBtn.value) {
    emits('login', { loginData: state.form, loginFn: authApi.loginPwd })
  }
}

onMounted(() => {
  if (env.LOGIN_VERIFY == 2) {
    handleRefreshCaptcha()
  }
})
</script>
<style lang="scss" scoped>
.login-pwd-container {
  // @extend .login-xxx-container;

  .captcha-img {
    height: 40px;
    width: 100px;
    cursor: pointer;
  }
  .get-smsCode {
    &.waiting {
      color: $--color-text-secondary;
    }
  }
  .icon-style {
    font-size: $--size-font-x-large;
  }
  .submit-text {
    font-size: $--size-font-x-large;
    letter-spacing: 0.5rem;
  }
  .submit-text {
    font-size: $--size-font-x-large;
    letter-spacing: 0.5rem;
  }

  .login-btn {
    width: 100%;
    margin-top: 1rem;
  }

  .image-slot {
    text-align: center;
    background-color: $--color-bg-base;
    color: $--color-text-secondary;
  }
}
</style>
